<template>
  <div class="card-template">
    <div class="user-box">
      <div>
        <el-image style="width: 100px; height: 100px" round fit="cover" :src="userInfo.real_photo || avatarIcon" />
      </div>
      <div class="user-content">
        <div class="info-name">
          {{ userInfo.real_name }}
        </div>
        <div class="professional">{{ userInfo.unit_title }}｜{{ userInfo.unit_department }}</div>
        <div class="unit-logo">
          <el-image style="width: 20px; height: 20px" :src="userInfo.unit_logo" />
          <div class="is-topThree" v-show="userInfo.unit_level"><i class="iconfont icon-yiyuan1"></i>{{
            userInfo.unit_level }}</div>
        </div>
        <div class="info-hospitals">
          {{ userInfo.unit_name }}
        </div>
      </div>
    </div>
    <div class="honor-content">
      <div class="honor-box" v-for="(h, k) in honor" :key="k">
        <div class="honor">
          <HonorIcon />{{ h }}
          <RightHonorIcon />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import avatarIcon from '@/assets/images/userInfo/avatar.png'
import HonorIcon from '@/components/icons/IconHonor.vue'
import RightHonorIcon from '@/components/icons/IconHonorRight.vue'

export default {
  components: {
    HonorIcon,
    RightHonorIcon,
  },
  props: {
    // 用户信息
    userInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      avatarIcon: avatarIcon,
      honor: [
        // '广东省医师协会胸外科分会常务委员',
        // '广东省精准医学应用协会食管癌分会',
        // '中国医药教育协会胸外科专委会常务委员'
      ]
    }
  },
  computed: {
  },
  created() {

  },
  watch: {
    userInfo: {
      handler(nv) {
        if (nv.unit_job && nv.unit_job !== '') {
          this.honor = nv.unit_job.split(',')
        } else {
          this.honor = []
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    jumpPage(url) {
      router.push(url)
    }
  }
}
</script>

<style scoped lang="scss">
.card-template {
  font-size: 16px;

  .user-box {
    display: flex;
    margin-bottom: 12px;

    .real_photo-box {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
    }

    :deep(.el-image) {
      width: 112px;
      height: 112px;
      margin-right: 12px;
      border-radius: 8px;
    }
  }

  .user-content {
    width: calc(100% - 112px);
    padding-left: 3px;

    .info-name {
      font-weight: 600;
      font-size: 24px;
      color: #1c1f23;
      line-height: 34px;
      margin-bottom: 4px;
    }

    .professional {
      font-size: 14px;
      color: #1c1f23;
      line-height: 20px;
      margin-bottom: 8px;
    }

    .info-hospitals {
      font-size: 14px;
      color: #1c1f23;
      line-height: 20px;
    }

    .unit-logo {
      height: 20px;
      display: flex;
      align-items: center;
      margin-bottom: 4px;

      :deep(.el-image) {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
    }

    .is-topThree {
      height: 20px;
      background: rgba(4, 209, 184, 0.1);
      border-radius: 4px;
      font-size: 14px;
      color: #08bda7;
      line-height: 20px;
      padding-left: 4px;
      padding-right: 4px;
      position: relative;

      .iconfont {
        font-size: 12px;
        margin-right: 2px;
      }

      &::before {
        position: absolute;
        width: 20px;
        height: 20px;
        content: '';
        background-image: url('/@/assets/images/userInfo/hos_icon.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 0;
        left: 4px;
      }
    }
  }
}

.honor-content {
  .honor-box {
    width: 100%;
    /* 或者你需要的固定宽度 */
    overflow: hidden;
    height: 17px;
    margin-bottom: 4px;
  }

  .honor {
    margin-right: -50px;
    /* 根据需要调整这个值 */
    width: max-content;
    height: 17px;
    line-height: 17px;
    background: linear-gradient(90deg, #f7f2e4 0%, #ffefcb 100%);
    border-radius: 4px 4px 4px 4px;
    padding: 0 6px;
    font-size: 12px;
    color: #ae6b1a;
    text-align: center;
  }
}
</style>
